<template>
  <div>
      <div class="main_container">
          <div class="banner-box banner-adware">
             <img src="../assets/bannerbg.jpg" alt="">
             <div class="banner-adware-infor">
                 <h2>易订货 ，让生意更简单</h2>
                 <h5>打通企业上下游协作，实时数据决策</h5>
                 <a href="https://sso.dinghuo123.com/apply/apply2?rc=00389" class="btn btn-primary">免费开通</a>
             </div>
         </div>
          <section class="production-banner">
                <div class="container">
                    <h3 class="banner-title">易订货 打造企业专属的全渠道营销订货平台</h3>
                    <div class="production-feature">
                        <div class="row">
                            <div class="col-lg-4 col-md-4 col-xs-6 col-sm-6 item">
                                <div class="swiper-img orders">
                                </div>
                                <div class="summary">
                                    <h5>订货管控</h5>
                                    <p>订货管理、退货管理、运费管理、订单核准、订单多维统计</p>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-4 col-xs-6 col-sm-6  item">
                                <div class="swiper-img stores">
                                </div>
                                <div class="summary">
                                    <h5>库存管理</h5>
                                    <p>入库/出库/盘点、仓库调拨、扫码出库、发货核验、成本利润核算</p>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-4 col-xs-6 col-sm-6  item ">
                                <div class="swiper-img cash">
                                </div>
                                <div class="summary">
                                    <h5>资金结算</h5>
                                    <p>资金账户、在线支付、往来对账、收支明细、订单收款统计</p>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-4 col-xs-6 col-sm-6  item">
                                <div class="swiper-img customers ">
                                </div>
                                <div class="summary">
                                    <h5>客户运营</h5>
                                    <p>商机管理、客户管理、促销管理、营销工具、销售管理、客户360度视图、客户健康预警</p>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-4 col-xs-6 col-sm-6  item ">
                                <div class="swiper-img work">
                                </div>
                                <div class="summary">
                                    <h5>业务报表</h5>
                                    <p>订单统计报表、地区统计报表、商品销售报表、客户订货报表、销售业绩统计报表、销售毛利统计报表</p>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-4 col-xs-6 col-sm-6  item">
                                <div class="swiper-img purchase"></div>
                                <div class="summary">
                                    <h5>采购管理</h5>
                                    <p>智能采购、供应商管理、采购订单、采购入库、采购退货、采购汇总</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
          <section class="stern">
                 <h3>产品五大优势</h3>
                 <div class="stern-list container">
                     <div class="row">
                         <div class=" col-xs-12 col-md-4 stern-list-item">
                             <div class="stern-img">
                                 <img src="../assets/advantage3.jpg" width="100%" alt="">
                             </div>
                             <ul class="stern-list-all">
                                 <li class="title">功能强大设置灵活，可按企业需求灵活配置</li>
                                 <li class="special">
                                     一部手机解决全部订货业务，功能强大，操作简便
                                 </li>
                                 <li>
                                     业务流程、业务规则灵活定义，实时调整，满足企业个性需求
                                 </li>
                                 <li>
                                     丰富功能插件，即开即用，内置打印导出模板，支持自定义，满足企业实际需求，提升操作效率
                                 </li>
                             </ul>
                         </div>
                         <div class=" col-xs-12 col-md-4 stern-list-item">
                             <div class="stern-img">
                                 <img src="../assets/advantage2.jpg" width="100%" alt="">
                             </div>

                             <ul class="stern-list-all">
                                 <li class="title">实时业务数据多维呈现，高效决策运筹帷幄</li>
                                 <li class="special">
                                     无论身处何地，实时掌控业务数据，助力及时经营决策
                                 </li>
                                 <li>
                                     多维数据穿透，多角度全方位掌握业务现状，让决策更高效更精准
                                 </li>
                             </ul>
                         </div>
                         <div class=" col-xs-12 col-md-4 stern-list-item">
                             <div class="stern-img ">
                                 <img src="../assets/advantage5.jpg" width="100%" alt=" ">
                             </div>
                             <ul class="stern-list-all">
                                 <li class="title">技术领先，架构成熟，安全稳定</li>
                                 <li class="special">
                                     超过百万客户正在使用，服务安全、稳定有保障 跨地域多服务器数据同步备份，杜绝数据丢失风险
                                 </li>
                                 <li>
                                     通过ISO2017国际安全认证，所有服务流程均符合最高安全防护准则，完全杜绝数据泄密风险
                                 </li>
                                 <li>
                                     采用阿里云服务，顶级云服务商提供银行级别安全保障，为企业数据保驾护航
                                 </li>
                                 <li>
                                     行业领先：获得国家高新技术企业认定和双软认证，公司研发实力和创新能力获得国家认可，确保你持续享受行业领先的稳定产品
                                 </li>
                             </ul>
                         </div>
                         <div class=" col-xs-12 col-md-4 stern-list-item">
                             <div class="stern-img">
                                 <img src="../assets/advantage1.jpg" width="100%" alt="">
                             </div>
                             <ul class="stern-list-all">
                                 <li class="title">简便易用、快速上手</li>
                                 <li class="special">
                                     无需实施，无需培训，员工客户轻松使用
                                 </li>
                                 <li>
                                     在线操作引导，在线服务解答，快速解决操作疑难
                                 </li>
                             </ul>
                         </div>


                         <div class=" col-xs-12 col-md-4  stern-list-item">
                             <div class="stern-img">
                                 <img src="../assets/advantage4.jpg" width="100%" alt="">
                             </div>
                             <ul class="stern-list-all">
                                 <li class="title">开放API,拥有强大应用集成能力</li>
                                 <li class="special">
                                     完善的API数据接口，支持主流ERP系统集成和第三方应用集成
                                 </li>
                                 <li>
                                     强大的企业定制APP，打造企业专属的品牌订货APP
                                 </li>
                                 <li class="no-disc">
                                     <a href="javascript:void(0)" class="experiences" id="experience">申请接口</a>
                                 </li>
                                 <li class="no-disc">
                                     <a class="" style="margin-right:15px" href="//oss.dinghuo123.com/assets/docs/OAuth.pdf" target="_blank">OAuth 2.0文档下载</a>
                                     <a class="" href="http://wiki.dinghuo123.com" target="_blank">易订货Open API</a>
                                 </li>
                             </ul>
                         </div>

                         <div class=" col-xs-12 col-md-4 stern-list-item hidden-xs hidden-sm more-function">
                             <div class="stern-img ">
                                 <img src="../assets/advantage6.jpg" width="100%" alt=" ">
                             </div>
                             <ul class="stern-list-all ">
                                 <li class="title">更多...</li>
                                 <li class="special">
                                     易订货强大的研发实力将为您带来更多更佳的产品体验，期待您的发掘！
                                 </li>
                             </ul>
                         </div>
                     </div>
                 </div>
             </section>
          <section class="industry">
              <h3 class="industry-title">易订货解决方案</h3>
              <div class="industry-bott">
                <el-carousel :interval="3000" arrow="always">
                  <el-carousel-item>
                      <div class="slide-box">
                          <div class="col-lg-3 col-xs-12 col-sm-12 industry-head">
                              <img src="../assets/boss1.png" height="180" width="180" alt=" ">
                              <h5 class="industry-name">企业老板</h5>
                          </div>
                          <ul class="col-lg-4 col-xs-6 col-sm-6 clearfix">
                              <div class="special">痛点</div>
                              <li>老板无法随时掌握业务动态，难以做出科学决策</li>
                              <li>内部管理流程冗长，效率低下，老板决策难以落地</li>
                              <li>无法直接掌握终端客户资源，客户流失严重</li>
                          </ul>
                          <ul class="col-lg-4 col-xs-6 col-sm-6 clearfix">
                              <div class="special">解决方案</div>
                              <li>多维度数据穿透，一部手机掌握业务</li>
                              <li>业务流程科学化专业化，化繁为简，提升内部运转效率</li>
                              <li> 老板全面管理客户，直接掌握终端客户</li>
                          </ul>
                      </div>
                  </el-carousel-item>
                  <el-carousel-item>
                      <div class="slide-box">
                          <div class="col-lg-3 col-xs-12 col-sm-12 industry-head">
                              <img src="../assets/boss2.png" height="180" width="180" alt=" ">
                              <h5 class="industry-name">销售总监</h5>
                          </div>
                          <ul class="col-lg-4 col-xs-6 col-sm-6 clearfix">
                              <div class="special">痛点</div>
                              <li>招商难，商机开拓成本高</li>
                              <li>新品不能及时传达，新品推广效果差</li>
                              <li>促销活动单一传递慢，销售业绩差</li>
                              <li>客户管理混乱，商品价格管理乱</li>
                              <li>无法快速知晓业务员销售情况</li>
                          </ul>
                          <ul class="col-lg-4 col-xs-6 col-sm-6 clearfix">
                              <div class="special">解决方案</div>
                              <li>移动招商，商机轻松获取</li>
                              <li>玩转各种营销工具，轻松推广公司新品
                              </li>
                              <li>多种促销灵活多样，实现业绩倍增
                              </li>
                              <li>灵活价格体系管理，客户分级管控
                              </li>
                              <li>销售报表自动统计，快速掌握销售情况
                              </li>
                          </ul>
                      </div>
                  </el-carousel-item>
                  <el-carousel-item>
                      <div class="slide-box">
                          <div class="col-lg-3 col-xs-12 col-sm-12  industry-head">
                              <img src="../assets/boss3.png" height="180" width="180" alt=" ">
                              <h5 class="industry-name">财务总监</h5>
                          </div>
                          <ul class="col-lg-4 col-xs-6 col-sm-6 clearfix">
                              <div class="special">痛点</div>
                              <li>结算周期长，回款慢，存在呆账、坏账</li>
                              <li>资金压力大，上下游对账很头痛</li>
                          </ul>
                          <ul class="col-lg-4 col-xs-6 col-sm-6 clearfix">
                              <div class="special">解决方案</div>
                              <li>在线支付，加速资金回笼</li>
                              <li>订单款项一一对应，应收应付双向透明
                              </li>
                          </ul>
                      </div>
                  </el-carousel-item>
                  <el-carousel-item>
                      <div class="slide-box">
                          <div class="col-lg-3 col-xs-12 col-sm-12  industry-head">
                              <img src="../assets/boss4.png" height="180" width="180" alt=" ">
                              <h5 class="industry-name">IT主管</h5>
                          </div>
                          <ul class="col-lg-4 col-xs-6 col-sm-6 clearfix">
                              <div class="special">痛点</div>
                              <li>自建平台需投入大量人力物力进行技术部署，产出率低，转型升级困难</li>
                              <li>传统ERP需花重金购买本地服务器，IT运营门槛高，维护难</li>
                              <li>系统操作复杂，部分客户触网能力有限，需花时间进行培训</li>
                          </ul>
                          <ul class="col-lg-4 col-xs-6 col-sm-6 clearfix">
                              <div class="special">解决方案</div>
                              <li>基于SaaS的订货平台，提供系统维护服务，让企业IT可脱离技术与部署的复杂性，只需要关注功能应用；</li>
                              <li>基于阿里云搭建的移动客户订货系统，按年付费成本低，无需维护。</li>
                              <li>操作简单易上手</li>
                          </ul>
                      </div>
                  </el-carousel-item>
                  <el-carousel-item>
                      <div class="slide-box">
                          <div class="col-lg-3 col-xs-12 col-sm-12 industry-head">
                              <img src="../assets/boss5.png" height="180" width="180" alt=" ">
                              <h5 class="industry-name">订单审核员</h5>
                          </div>
                          <ul class="col-lg-4 col-xs-6 col-sm-6 clearfix">
                              <div class="special">痛点</div>
                              <li>各种方式接单，容易错单漏单</li>
                              <li>手工制表汇总，工作效率低</li>
                              <li>客户越来越多，价格混乱记不清</li>
                          </ul>
                          <ul class="col-lg-4 col-xs-6 col-sm-6 clearfix">
                              <div class="special">解决方案</div>
                              <li>订单处理规范化，告别错单漏单</li>
                              <li>系统自动汇总订单，省时高效</li>
                              <li>客户自助下单，有效提升工作效率</li>
                          </ul>
                      </div>
                  </el-carousel-item>
                  <el-carousel-item>
                      <div class="slide-box">
                          <div class="col-lg-3 col-xs-12 col-sm-12  industry-head">
                              <img src="../assets/boss6.png" height="180" width="180" alt=" ">
                              <h5 class="industry-name">仓库管理员</h5>
                          </div>
                          <ul class="col-lg-4 col-xs-6 col-sm-6 clearfix">
                              <div class="special">痛点</div>
                              <li>订货和库存不能实时同步，有货没货搞不清</li>
                              <li>库存盘点信息无法实时同步，造成信息不对称，影响货品采购和发货</li>
                          </ul>
                          <ul class="col-lg-4 col-xs-6 col-sm-6 clearfix">
                              <div class="special">解决方案</div>
                              <li>订单库存实时同步，全业务流程一体化管控，实时知晓库存情况，及时补货，让生意更简单</li>
                              <li>仓库盘点信息多终端实时同步，方便采购、销售、老板及时了解库存信息，做出正确决策</li>
                          </ul>
                      </div>
                  </el-carousel-item>
              </el-carousel>
              </div>
          </section>
      </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
     return {
        lists:[ ],
        activeIndex: '1',
        isDisplay: false,
        articles:[ ]
    }
  },
   methods: {
      handleSelect(key, keyPath) {
         console.log(key, keyPath);
      },
      handleScroll(){
         var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
         if(scrollTop>70){
            this.isDisplay=true;
         }else{
            this.isDisplay=false;
          }
      },
      getSlide:function(){
         var that=this;
         that.$http({
            method:'GET',
//            url:"http://192.168.199.109/index.php/api/ecdo/slide"
             url: "https://x.ecdo.net/index.php/api/ecdo/slide"

         }).then(function(res){
            console.log(res);
            that.lists=res.data;
         },function(error){
            console.log(error);
         })
       },
      getArticles:function(){
         var that=this;
         that.$http({
            method:'GET',
//            url:"http://192.168.199.109/index.php/api/ecdo/articles"
             url: "https://x.ecdo.net/index.php/api/ecdo/articles"

         }).then(function(res){
            console.log(res);
             that.articles=res.data;
         },function(error){
            console.log(error);
           })
      }

   },

   created(){
      this.getSlide();
      this.getArticles();
   },

   mounted(){
        window.addEventListener('scroll',this.handleScroll);
   }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    @font-face {
        font-family: 'iconfont';  /* project id 962996 */
        src: url('https://at.alicdn.com/t/font_962996_18fhr59oz2g.eot');
        src: url('https://at.alicdn.com/t/font_962996_18fhr59oz2g.eot?#iefix') format('embedded-opentype'),
        url('https://at.alicdn.com/t/font_962996_18fhr59oz2g.woff2') format('woff2'),
        url('https://at.alicdn.com/t/font_962996_18fhr59oz2g.woff') format('woff'),
        url('https://at.alicdn.com/t/font_962996_18fhr59oz2g.ttf') format('truetype'),
        url('https://at.alicdn.com/t/font_962996_18fhr59oz2g.svg#iconfont') format('svg');
    }
    ul{
        margin: 0;
        padding: 0;
    }
    P{
        margin-bottom: 0;
    }

    .main_container{
        width:100%;
    }
    .banner-box{
        width: 100%;
        margin:0 auto;
        position: relative;
    }
    .banner-box img{
        width: 100%;
    }
     .banner-adware-infor {
        position: absolute;
        top: 9vw;
        width: 543px;
        padding-left: 30px;
        padding-bottom: 30px;
        left: 10vw;
        overflow: hidden;
    }
    .banner-adware-infor h2 {
        color: #fff;
        text-align: left;
    }
    .banner-adware-infor h5 {
        color: #fff;
        margin: 28px 0;
        text-align: left;
        font-weight: normal;
    }
    .banner-adware-infor .btn-primary {
        width: 120px;
        height: 40px;
        line-height: 40px;
    }
    .btn-primary {
        text-align: center;
        background: linear-gradient(80deg, #4BE7F6 -10%, #20C7E3 77%);
        color: #fff;
        font-size: 14px;
        border-radius: 100px;
        margin: 0 auto;
        padding: 0px;
        float: left;
    }
    .banner-img{
        width: 100%;
    }
    .el-carousel__item h3 {
          color: #475669;
          font-size: 18px;
          opacity: 0.75;
          line-height: 300px;
          margin: 0;
    }
    .content{
        width: 1000px;
        position: relative;
        margin: 0 auto;
        z-index: 200;
    }
    .production-banner {
        background-color: #fff;
        padding: 120px 0 45px 0;
        width: 100%;
        text-align: center;
    }
    .production-banner h3 {
        color: #444444;
        text-align: center;
        margin-bottom: 90px;
    }
    .production-banner .production-feature {
        width: 100%;
        height: 480px;
        position: relative;
        text-align: center;
    }
    .production-banner .production-feature .row .item {
        text-align: center;
        margin-bottom: 70px;
    }
    .production-banner .production-feature .row .item .swiper-img {
        width: 100px;
        height: 100px;
        margin: 0 auto;
        background-position: center center;
        background-repeat: no-repeat;
    }
    .production-banner .production-feature .row .item .summary h5 {
        font-size: 18px;
        color: #444;
        margin-top: 18px;
    }
    .production-banner .production-feature .row .item .summary p {
        width: 80%;
        margin: 10px auto 0 auto;
        font-size: 14px;
        line-height: 24px;
        color: #888;
    }
    .production-banner .production-feature .row .item .swiper-img.orders {
        background-image: url(../assets/item7.png);
    }
    .production-banner .production-feature .row .item .swiper-img.stores {
        background-image: url(../assets/item8.png);
    }
    .production-banner .production-feature .row .item .swiper-img.cash {
        background-image: url(../assets/item9.png);
    }
    .production-banner .production-feature .row .item .swiper-img.customers {
        background-image: url(../assets/item10.png);
    }
    .production-banner .production-feature .row .item .swiper-img.work {
        background-image: url(../assets/item12.png);
    }
    .production-banner .production-feature .row .item .swiper-img.purchase {
        background-image: url(../assets/item11.png);
    }
    .stern {
        padding: 120px 0 94px 0;
        text-align: center;
        position: relative;
        background-color: #f5f6fa;
    }
    h3 {
        font-size: 36px;
        color: #444444;
        text-align: center;
    }
    .stern .stern-list {
        position: relative;
        margin: 60px auto 0 auto;
        padding-left: 0;
        padding-right: 0;
    }
    .stern .stern-list .stern-list-item {
        height: 325px;
        margin-bottom: 25px;
        overflow: hidden;
    }
    .stern .stern-list .stern-img {
        width: 100%;
        height: auto;
    }
    .stern .stern-list .stern-img img {
        border-top-right-radius: 4px;
        border-top-left-radius: 4px;
    }
    .stern .stern-list .stern-list-all {
        position: absolute;
        left: 15px;
        right: 15px;
        bottom: 25px;
        top: 185px;
        height: 124px;
        background-color: #fff;
        padding: 14px 24px 0 24px;
        text-align: left;
        list-style-type: none;
        overflow: hidden;
        border-bottom-right-radius: 4px;
        border-bottom-left-radius: 4px;
    }
    .stern .stern-list .stern-list-all .title {
        font-size: 16px;
        color: #444;
        text-align: left;
        list-style-type: none;
        visibility: visible;
    }
    .stern .stern-list .stern-list-all li {
        margin: 10px 0;
        font-size: 14px;
        line-height: 22px;
        color: #888;
        visibility: hidden;
        list-style-type: none;
    }
    .stern .stern-list .stern-list-all .special {
        visibility: visible;
    }
    .industry {
        padding: 0 15px;
        height: 740px;
        position: relative;
        background-image: url(../assets/customerbg.jpg);
        background-repeat: no-repeat;
        background-size: cover;
    }
    .industry .industry-title {
        color: #fff;
        padding: 120px 0 50px 0;
    }
     .industry-name {
        margin: 20px 0 25px 0;
        font-size: 14px;
        line-height: 36px;
        color: #444;
        text-align: center;
        font-weight: bolder;
    }
   ul .special {
        list-style: none;
        font-size: 24px;
        color: #333333;
        line-height: 25px;
        margin-bottom: 25px;
       text-align: left;
    }
   ul li {
        font-size: 14px;
        color: #999999;
        line-height: 22px;
        margin-bottom: 20px;
        position: relative;
       text-align: left;
   }
    .slide-box{
        width: 1200px;
        background-color: #fff;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        height: 400px;
        padding: 100px 160px;
        margin: 0 auto;
    }
    .industry-bott{
        width: 1200px;
        margin: 0 auto;
    }
</style>

<style>
     .el-carousel__button{
        background-color: #ccc;
    }
</style>
